<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

</body>
<script>
/*在2.0版本的操作api代码，一般是卸载data,methods,watch,mounted等等选项中的，我们称之为“选项API”(Option API);

在3.0版本中vue官方在不擅长选项API的基础上，又新增了新的操作API接口，叫“组合API”（Group API）。*/


/*选项API*/
export default {
  data () {
    return {
      userInfo: {
        name: 'xiaoming',
        age: 12
      },
      userPhotos: [
        "1.png",
        "2.png"
      ]
    }
  },
  created () {
      this.getUserInfo();
  },
  methods: {
    getUserInfo () {
      return this.userInfo = {name: "xiaoming", age: 12};
    }
  }
}

/*组合API
初始化了一个setup方法，初始化时间远远早于beforeCreate方法之前就自动执行，这时候操作不了this，data，methods等*/
/*<template>
  <p>{{age}}</p>
  <button @click="ajax_get_age(18)">点击获取年龄</button>
</template>*/
import {ref} from 'vue';
export default {
  name: 'group',
  setup () {
    console.log(`this=${this}`); // 结果：this=undefined
    // 申明一个基本数据类型的变量，需要从vue中引入一个ref
    let age = ref(0); // 默认值0
    let ajax_get_age = (num) => { // 模拟ajax从服务端请求得到数据
      age.value = num;
    }
    return {age:age, ajax_get_age: ajax_get_age}; // return出去就可以使用了，<p>{{age}}</p>
  }
}
</script>
</html>
